<script setup>
  import { useRouter } from 'vue-router';
  import { defineUser } from '../store/logUserStore.js';
  import { defineSchedule } from '../store/scheduleStore.js';
  import instance from '../js/axios.js';

  let router = useRouter()
  let sysUser = defineUser()
  let schedule = defineSchedule()

  function logout() {
    sysUser.$reset()
    schedule.$reset()
    router.push('/login')
  }

  
  async function showSchedule() {
    let response = await instance.get('/schedule/findAllSchedule', {params:{uid: sysUser.uid}})
    console.log(response)
    
    schedule.itemList = response.data.data
  }
  

</script>
<template>
 <div>
  <h1 class="ht">欢迎使用日程管理系统</h1>
  <div>
   <div class="optionDiv" v-if="sysUser.username == ''">
    <router-link to="/login">
     <button class="b1s">登录</button>
    </router-link>
      
    <router-link to="/register">
     <button class="b1s">注册</button>
    </router-link>
   </div>
   <div  class="optionDiv" v-else>
    欢迎:{{ sysUser.username }}
    <button class="b1b" @click="logout()">退出登录</button>
    <router-link to="/showSchedule">
     <button class="b1b" @click="showSchedule()">查看我的日程</button>
    </router-link>
   </div>
   <br>
  </div>
 </div>
</template>
<style scoped>
 .ht{
   text-align: center;
   color: cadetblue;
 font-family: 幼圆;
 }
 .b1s{
    border: 2px solid powderblue;
    border-radius: 4px;
    width:60px;
    background-color: antiSuewhite;
  }
  .b1b{
    border: 2px solid powderblue;
    border-radius: 4px;
    width:100px;
    background-color: antiSuewhite;
  }
  .optionDiv{
   width: 400px;
   float: right;
  }
</style>
